// Variables
//
// Copy settings from this file into the provided `_custom.scss` to override
// the Bootstrap defaults without modifying key, versioned files.
//
// All variables need to be named as ${rule}-${element}-${modifier}


//
// Colors
//

// Common colors
// Add !default so _custom.scss can override it
$color-text: #333 !default;
$color-text-muted: #777 !default;

$color-background: #fff !default;
$color-background-over: rgba(0, 0, 0, .05) !default;
$color-background-back: #f3f3f3 !default;

$color-border: #ddd !default;

// `body` and `container`
$color-text-body: $color-text !default;
$color-background-body: $color-background-back !default;
$color-background-container: $color-background !default;

// Links
// hsl is easy to modify
$color-text-link: hsl(210, 100%, 50%) !default;
// Use rgba so it can nesting
$color-background-active: rgba(0, 0, 0, .1) !default;

// Codes
$color-background-code: $color-background-over !default;
$color-background-pre: $color-background-over !default;

// `blockquote`
$color-text-blockquote: $color-text-muted !default;

// `mark`
$color-background-mark: #ff0 !default;

// Tables
$color-background-table: $color-background !default;
$color-background-th: $color-background-over !default;

// Forms
// For `input`s which is not a button
$color-background-input: $color-background !default;
// For focused input
$color-border-input-focus: hsl(210, 100%, 60%) !default;
// For buttons
$color-background-btn: $color-background-back !default;
$color-text-btn-primary: $color-background !default;
$color-background-btn-primary: hsl(120, 50%, 50%) !default;
$color-text-btn-danger: hsl(0, 100%, 40%) !default;


//
// Spacing
//

$width-gap: 15px !default;
$width-gap-double: 30px !default;
$width-gap-half: 7px !default;

$width-padding-input: 5px !default;
$width-border: 1px !default;
$width-padding-border-input: $width-padding-input + $width-border !default;


//
// layouts
//

$width-scrollbar: 17px !default;

$padding-container: 0 $width-gap $width-gap !default;
$padding-container-desktop: 0 $width-gap-double $width-gap !default;

$min-width-container: 320px !default;
$max-width-container: 768px - $width-gap-double !default;
// So won't have scroll-x on device which width is 1025px
$width-container-breakpoint: 1024px + $width-scrollbar !default;

//
// Typography
//

// 1rem = 10px
$rem-base: 10px !default;

$font-size: 1.8rem !default;

// h4, h5, h6 is not very useful, so we set them to the same size of normal
// font-size, but with $font-weight-bold
$font-size-h1: 3.2rem !default;
$font-size-h2: 2.6rem !default;
$font-size-h3: 2.4rem !default;
$font-size-h4: 2.2rem !default;
$font-size-h5: 2rem !default;
$font-size-h6: 1.8rem !default;

// Mobile device always have a small length of width, so we should keep pre as
// small as it can, 1.4rem is to small and looks strange in Windows Chrome if
// there are some Chinese words in pre.
$font-size-pre: 1.5rem !default;

$font-size-small: 85% !default;
$font-size-code: $font-size-small !default;
$font-size-address: $font-size-small !default;
$font-size-sub-sup: 75% !default;

$line-height: 1.5 !default;

// line-height need to be set to pre, not code
$line-height-pre: 1.2 !default;

$font-weight-bold: 600 !default;

$font-family:
  // Safari for OS X and iOS (San Francisco)
  -apple-system,
  // Chrome for OS X (San Francisco)
  BlinkMacSystemFont,
  // Windows
  'Segoe UI',
  // Android
  'Roboto',
  // Linux
  'Oxygen', // KDE
  'Ubuntu',
  'Cantarell', // GNOME
  // Firefox OS [R.I.P.]
  'Fira Sans',
  // Older Android
  'Droid Sans',
  // Chinese font for OSX and iOS
  'Hiragino Sans GB',
  // Chinese font for Windows
  'Microsoft Yahei', '微软雅黑',
  // Basic web fallback
  Arial, Helvetica, STHeiti, sans-serif,
  // Emoji
  'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol' !default;

// TODO Chinese font-family for pre code
// https://github.com/xcatliu/mobi.css/issues/8
$font-family-monospace: Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;

$padding-code: 2px 3px !default;

$border-left-blockquote: $width-padding-input solid $color-border !default;

$border-top-hr: $width-border solid $color-border !default;

// Set the default max-height to scroll-view
$max-height-scroll-view: 300px !default;


//
// Tables
//

$padding-table-cell: $width-padding-input !default;
$border-bottom-th-td: $width-border solid $color-border !default;


//
// Forms
//

// For inputs
$border-radius-input: 3px !default;
$padding-input: $width-padding-input 2 * $width-padding-input !default;
$border-input: $width-border solid $color-border !default;
// For file input
$padding-file: $width-padding-border-input 0 !default;

// For checkbox and radio
$margin-checkbox-radio: 0 $width-padding-input 0 0 !default;
// 5px padding + 1px border
$width-padding-top-label: $width-padding-border-input !default;
$width-padding-bottom-label: $width-padding-border-input !default;

// Background image of down arrow
$background-image-angle-down: url("data:image/svg+xml;charset=utf-8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='20' viewBox='0 0 32 20'><path fill='#{$color-text}' d='M0 0h32L16 20z'/></svg>") !default;
